<template>
  <span v-if="renderType === 'renderCell'">{{innerValue}}</span>
  <ZSelectUserByDep
    v-else
    :value="value"
    v-bind="cellProps"
    :getPopupContainer="getPopupContainer"
    @change="onChange"
  />
</template>

<script>
import ZSelectUserByDep from '@/components/zzbiz/ZSelectUserByDep'
export default {
  name: 'VxeSelectUserByDep',
  components: {
    ZSelectUserByDep
  },
  props: {
    value: [String, Number],
    params: Object,
    renderOptions: Object,
    cellProps: Object,
    renderType: String
  },
  data() {
    return {
      options: [],
      loading: false
    }
  },
  computed: {
    innerValue() {
      const { row, column } = this.params
      return row.textMap ? row.textMap[column.field + '$DICT_TEXT_'] || row[column.field] : row[column.field]
    }
  },
  methods: {
    onChange(usernames, users) {
      const { events = {}} = this.renderOptions
      const { $table, row, column } = this.params
      if (!this.cellProps || !this.cellProps.triggerChange) {
        const textMap = row.textMap || {}
        const nicknames = []
        users.forEach(item => {
          nicknames.push(item.nickname)
        })
        // 处理用户选择之后的回显
        textMap[column.field + '$DICT_TEXT_'] = nicknames.join(',')
        this.$set(row, column.property, usernames)
        this.$set(row, 'textMap', textMap)
      }
      $table.updateStatus(this.params)
      events.change && events.change({
        $table: $table,
        ids: usernames,
        selectRows: users,
        row: row
      })
    },
    getPopupContainer() {
      return document.body
    }
  },
  enhanced: {
    translate: true
  }
}
</script>
